<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
//在main.js中引入中文方法即可
// import locale from 'element-plus/lib/locale/lang/zh-cn';
import * as echarts from "echarts";
import { onMounted, inject, reactive, nextTick, ref } from "vue";
const searchDate = ref('');

// 切换时间
function changeDate(val) {
  console.log(val);
  getBackHomeCount();
}

// 定义数据
const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
]);

// 获取数据
function getBackHomeCount() {
  tableData.splice(0, tableData.length);
  $axios
    .get("/api/overview/earlyWarning", {
      params: {
        endData: searchDate.value,
      },
    })
    .then((res) => {
      console.log('疫情风险预警分析', res)
      res.data.data.forEach((item) => {
        tableData.push(item);
      });
    })
    .then(nextTick)
    .then(() => {
      autoScroll();
    });
}

function autoScroll() {
  const el = document.querySelector("#tableList3");
  const elHeight = el.offsetHeight;
  const sHeight = el.scrollHeight;
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++;
    } else {
      el.scrollTop = 0;
    }
  }, 100);
}

const $axios = inject("$axios");
function openWindow() {//NO Use
  window.open("https://bpmn.honqun.com/admin/#/yq/PersonBackHome");
}
function getChartData(type) {
  $axios
    .get("person_back_home/backHomeStat", { params: { md: type } })
    .then((res) => {
      const xAxis = [];
      const data = [];
      res.data.data.forEach((item) => {
        xAxis.push(item.time);
        data.push(item.num);
      });
      option = {
        color: ["#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            nameTextStyle: {
              color: "#fff",
            },
            type: "category",
            boundaryGap: false,
            data: xAxis,
            axisLine: {
              //x轴线的颜色以及宽度
              show: true,
              lineStyle: {
                color: "rgba(219,225,255,1)",
                width: 0,
                type: "solid",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              //x轴文字的配置
              show: true,
              textStyle: {
                color: "rgba(219,225,255,1)",
              },
            },
            splitLine: {
              //分割线配置
              show: false,
              lineStyle: {
                color: "rgba(219,225,255,1)",
              },
            },
          },
        ],
        yAxis: [
          {
            name: "单位:次",
            type: "value",
            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "rgba(219,225,255,1)",
                margin: 15,
              },
              // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              //y轴线的颜色以及宽度
              show: false,
              lineStyle: {
                color: "rgba(219,225,255,.5)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                color: "rgba(219,225,255,.3)",
              },
            },
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(62, 157, 255, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(27, 137, 252, 0.1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: data,
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    });
}

var dom;
var myChart;
var option;

onMounted(() => {
  // dom = document.getElementById("trendChart");
  // myChart = echarts.init(dom, null, {
  //   renderer: "canvas",
  //   useDirtyRect: false,
  // });

  // getChartData("月");
  getBackHomeCount();
});
</script>

<template>
  <MoniterItem title="疫情风险预警分析" @timeUnitClicked="getChartData">
    <template #right>
        <a href="/admin/#/yq/HsResultNeusoft" style="color: #00f9ff;text-decoration: none;" target="_blank">更多》</a>
    </template>
    <template #content>
      <div class="search-date">
        <text>统计截止日期：</text>
        <!-- <el-config-provider :locale="locale"> -->
          <el-date-picker v-model="searchDate" type="date" placeholder="选择日期" @change="changeDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD"></el-date-picker>
        <!-- </el-config-provider> -->
      </div>
      <!-- <div style="height: 100%" id="trendChart"></div> -->
      <div class="line" style="font-size: 14px;font-weight:600;">
        <div style="flex: 0.5">序号</div>
        <div style="flex: 1">乡镇名称</div>
        <div style="flex: 0.8">应采人数</div>
        <div style="flex: 0.8">实采人数</div>
        <div style="flex: 0.8">未采人数</div>
        <div style="flex: 0.8">异常人数</div>
      </div>
      <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList3">
        <div
          :class="{ line: true, lineColor: index % 2 === 1 }"
          v-for="(item, index) in tableData"
          :key="index"
          ref="tableRef"
        >
          <div style="flex: 0.5" class="circle-box">
            <div class="circle">
              {{ index + 1 }}
            </div>
          </div>
          <div style="flex: 1">{{ item.town }}</div>
          <div style="flex: 0.8">{{ item.allPersons }}</div>
          <div style="flex: 0.8; color: #00EAFF">{{ item.reals }}</div>
          <div style="flex: 0.8; color: #FFD200">{{ item.notTest }}</div>
          <div style="flex: 0.8; color: #F95352">{{ item.abnormal }}</div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.search-date {
  text-align: right;

  text {
    font-size: 14px;
  }
}
a.more {
  color: #00f9ff;
  text-decoration: none;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}

.circle-box {
  display: flex;
  justify-content: center;
}

.circle {
  width: 21px;
  height: 21px;
  background-image: url('@/assets/circle.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
